<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 先准备一个容器 -->
    <div id="app">
      <!-- 普通文本框 -->
      <input type="text" v-model="msg" />
      <p>{{msg}}</p>
      <hr />
      <!-- 多行文本框 -->
      <textarea v-model="msg"></textarea>
      <hr />
      <!-- 复选框 -->
      <input type="checkbox" v-model="flag" />
      <p>{{flag}}</p>
      <!-- 单选按钮 必须还有value 只要v-model一样就说明是一组 -->
      <input type="radio" v-model="gender" value="male" />男
      <input type="radio" v-model="gender" value="female" />女
      <p>{{gender}}</p>
      <hr />
      <select v-model="city">
        <option>北京</option>
        <option>上海</option>
        <option>成都</option>
      </select>
      <p>{{city}}</p>
      <hr />
      <!-- 一组复选框 -->
      <input type="checkbox" v-model="hobby" value="sing" />sing
      <input type="checkbox" v-model="hobby" value="dance" />dance
      <input type="checkbox" v-model="hobby" value="rap" />rap
      <p>{{hobby}}</p>
    </div>
    <!-- 2. 引框架 -->
    <script src="./vue.js"></script>
    <script>
      // 3.初始化vue实例对象
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "",
          flag: true,
          gender: "male",
          city: "上海",
          hobby: ["dance"],
        },
      });
    </script>
  </body>
</html>

<!-- 特殊情况：
1. 单选 只要是一组v-model必须一样 并且要给表单元素加value 
2. 复选框只有一个 值是布尔值 
3. 一组复选框 v-model必须一样 每个复选框要有value值 v-model对应的是一个数组 -->
